<template>
	<view>
		<dsl-navbar title="服务费报表" isBack bgTopImg="white"></dsl-navbar>
		<view class="serve_message text-white text-center ">
			<view class="padding-top">
				总服务费（元）
			</view>
			<view class="padding-top-sm">
				1515231.00
			</view>
			<view class="padding-top-xl">
				相比上月增长 19%
			</view>
			<view class="message_number text-sm ">
				总人数：12人
			</view>
		</view>
		<view class="bg-white margin radius padding ">
			<view class="solid-bottom rowsb align-center padding-bottom" v-for="(item,index) in 6">
				<view class="flex">
					<image src="https://img2.baidu.com/it/u=3354066334,1529355902&fm=26&fmt=auto&gp=0.jpg"
						mode="aspectFill" class="user_image"></image>
					<view class="margin-left ">
						<view class="padding-bottom flex align-center flex-wrap ">
							<text class="text-bold">天天</text>
							<view class="margin-left user_table">正式员工</view>
						</view>
						<view class="text-gray">入职日期：2020-09-29</view>
						<view class="text-gray">服务费：213199.98元</view>
					</view>
				</view>
				<text class="cuIcon-right"></text>
			</view>
		</view>

	</view>
</template>

<script>
	import EChart from '@/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: "目标值",
						data: [1135, 19126, 3211, 1333, 12322, 1134]
					}, ],
				},
				chartObj: {
					yAxis: {
						'data': [{
							max: 20000,
							min: 1000
						}]
					}

				}
			}
		},
		components: {
			EChart
		},
		onLoad() {

		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.serve_message {
		width: 686rpx;
		height: 371rpx;
		background: linear-gradient(343deg, #2294FF 0%, #47AEFF 100%);
		box-shadow: 0px 0px 20rpx rgba(51, 51, 51, 0.16);
		opacity: 1;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.message_number {
		width: 380rpx;
		height: 50rpx;
		background: #0074E1;
		opacity: 1;
		line-height: 50rpx;
		text-align: center;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	page {
		background: #F7F6FA;
	}

	.user_image {
		width: 80rpx;
		height: 80rpx;
		background: #1D263B;
		border-radius: 50%;
		opacity: 1;
	}

	.user_table {
		height: 34rpx;
		border: 1px solid #00D88F;
		opacity: 1;
		border-radius: 20rpx;
		line-height: 34rpx;
		font-size: 20rpx;
		color: #00D88F;
		text-align: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
</style>
